<!--
 * @Author: Tang
 * @Date: 2022-08-11 11:30:46
 * @LastEditTime: 2023-09-12 14:12:13
 * @FilePath: /prepaidfront/src/views/sjdp/index2.vue
-->
<template>
    <div>
        <dv-full-screen-container class="screen-container">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body d-flex">
                <h1 class="cockpitTitle">国贸云商{{ TitleTxt }}数据</h1>
                <!-- 左 -->
                <exportLeft
                    class="exportLeft"
                    ref="exportLeft"
                    @allChangeData="allChangeData"
                ></exportLeft>
                <!-- 中 -->
                <exportCenter
                    class="exportCenter"
                    ref="exportCenter"
                    @allChangeData="allChangeData"
                ></exportCenter>
                <!-- 右 -->
                <exportRight
                    class="exportRight"
                    ref="exportRight"
                    @allChangeData="allChangeData"
                ></exportRight>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script>
import exportCenter from './components/exportCenter.vue'
import exportLeft from './components/exportLeft.vue'
import exportRight from './components/exportRight.vue'
export default {
    props: {},
    data() {
        return {
            timer: null,
            loading: true,
            paramsData: {
                siteIds: []
            },
            TitleTxt: '进出口'
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.cancelLoading()
        // this.init(this.paramsData)
    },
    watch: {},
    methods: {
        allmapData(data) {
            this.$nextTick(() => {
                this.$refs.exportRight.rightChartgetall(data)
                this.$refs.exportLeft.leftChartgetall(data)
                this.$refs.exportCenter.CenterChartgetall(data)
            })
        },
        init(data) {
            //300000
            this.timer = setInterval(() => {
                this.allmapData(data)
            }, 300000)
        },
        cancelLoading() {
            setTimeout(() => {
                this.loading = false
            }, 2000)
        },
        changedata(data) {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
            this.paramsData.siteIds = []
            this.paramsData.siteIds.push(data)
            this.allmapData(this.paramsData)
            this.init(this.paramsData)
        },
        // 切换数据
        allChangeData(data) {
            if (data == '' || data == '全部') {
                this.TitleTxt = '进出口'
            } else {
                this.TitleTxt = data
            }
            this.$nextTick(() => {
                this.$refs.exportRight.rightChartgetall(data)
                this.$refs.exportLeft.leftChartgetall(data)
                this.$refs.exportCenter.CenterChartgetall(data)
            })
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
        this.timer = null
    },
    components: {
        exportCenter,
        exportLeft,
        exportRight
    }
}
</script>

<style scoped lang="scss">
.screen-container {
    color: #d3d6dd;
    background-color: #000000;
    width: 100%;
    // height: 100vh;
    // 660
    height: 704px !important;
    background-image: url('../../assets/cockpit/boxbg.png');
    background-size: cover;
    background-position: center center;
    .host-body {
        width: 100%;
        height: 100%;
        padding: 45px 0 19px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        justify-content: space-between;
        .exportLeft {
            width: 541px;
        }
        .exportCenter {
            width: 789px;
        }
        .exportRight {
            width: 541px;
        }
        .cockpitTitle {
            position: absolute;
            font-size: 36px;
            color: #ffffff;
            font-family: 'fangzheng';
            font-weight: 400;
            width: 100%;
            text-align: center;
            left: 0;
            top: 20px;
            letter-spacing: 2px;
        }
    }
}
</style>
